<template>
	<view class="map_view" :style="{
      'padding-top': height + 'px',
    }">
		<view :style="{
			width: '750rpx',
			height: statusBarHeight + 'px',
			background: 'white',
			position: 'fixed',
			top: 0,
			zIndex: 100,
		  }">
		</view>
		<view class="map1" :style="{
			top: statusBarHeight + 'px',
		}">
			<map id="map" v-if="showMaps" ref="map" class="map" :show-location="true" latitude="28.681521534542803"
				longitude="115.88111221790315" :markers="covers" @markertap="markertap" scale="18">
			</map>
			<cover-view class="head_back" v-if="showMaps">
				<cover-image class="img" src="/static/images/icon_ss_fanhui.png" @click.stop="toBack" />
			</cover-view>
		</view>
		<view class="box_search" :style="{ marginTop: statusBarHeight + 20 + 'px' }">
			<u-search placeholder="搜索内容" v-model="keyword" bgColor="none" :actionStyle="{
		  width: '100rpx',
		  color: '#888888',
		}" @custom="custom"></u-search>
		</view>
		<view class="box">
			<view class="head">
				<view class="head_title">
					<view class="title_left"> {{ detail.name }} </view>
					<view class="title_right">
						<collect flag="daohangyi"></collect>
					</view>
				</view>
				<view class="head_content" @click.stop="showModal = true;showMaps = false">
					{{ detail.content }}
				</view>
			</view>
		</view>
		<view class="rotate" v-if="detail.img_arr">
			<u-swiper :list="detail.img_arr" @change="(e) => (currentNum = e.current)" :autoplay="true"
				indicatorStyle="right: 20px;" height="388rpx" v-if="detail.img_arr.length > 0">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ detail.img_arr.length }}</text>
				</view>
			</u-swiper>
		</view>
		
		<view class="essentials">
			<view class="essentials_title" v-if="detail.info">
				导航要义({{ detail.info.length }})
			</view>
			<essentials :list="detail.info" :level_id="userInfo.level_id" @showPop="showPop" @showMap="showMap"
				 @handAudio="openHand"></essentials>
		</view>
		
		<view class="essentials">
			<view class="essentials_title" v-if="aoyi">
				山海意联({{ aoyi.length }})
			</view>
			<!-- <essentials :list="aoyi"></essentials> -->
			<view class="essentials_box">
				<view class="essentials_box_item" v-for="(item, index) in aoyi" :key="index" @click="toDetail(item)">
					<view class="item_left">
						<view class="left_title">
							{{ item.name }}
						</view>
						<!-- <view class="left_time" v-if="showTime">
				课程时间：2023年09月07日-2023年10月27日
			  </view> -->
					</view>
					<view class="item_right">
						<u-icon name="arrow-right" color="#ADADAD" size="24"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 人物 -->
		<view class="" style="padding: 0 30rpx; box-sizing: border-box">
			<view class="essentials_title" v-if="renwu && renwu.name">
				关联人物
			</view>
			<view class="detailed" v-if="renwu && renwu.name" @click="toGuan()">
				<view class="detailed_top">
					<view class="detailed_top_left">
						{{ renwu.name }}
					</view>
					<view class="detailed_top_right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- <view class="detailed_bottom">
			  {{ datas.huodong.renwu_count }}个任务点
			</view> -->
			</view>
		</view>
		
		<view class="essentials">
			<view class="essentials_title"> 游记 </view>
			<inspirationTower :isDate="true" :list="youji" :showYear="false" from="daohangyi"></inspirationTower>
		</view>
		<view class="comment">
			<view class="comment_head">
				<view class="comment_head_left"> 评论({{ comment_count }}) </view>
				<view class="comment_head_right"> 赞 {{ like_count }} </view>
			</view>
			<view class="comment_box">
				<!-- <reviewContent></reviewContent>
		<reviewContent></reviewContent> -->
				<reviewContent ref="review" :reply="reply" :reply_one="reply" v-for="(item, index) in list"
					:value="item" :index="index" :id="id" :my_level_id="my_level_id" @reply="handReply"
					@replyC="handReply1" @refresh="refresh">
				</reviewContent>
			</view>
		</view>
		<view style=" height: 128rpx"> </view>
		<view class="btn_box" @click="openPl">
			<image src="@/static/weichuang/icon_fld_pinglun.png" mode="" class="icon_img"></image>
			<view>评论</view>
		</view>
		
		
		<view class="zhezhao" v-if="isZhe" @click="zheColse"> </view>
		<view class="operate1" v-show="focusKuwei || isZhe">
			<scroll-view :scroll-top="99999" scroll-y="true" class="scroll-Y">
				<view class="operate_top">
					<view class="inp" style="width: 502rpx">
						<u--input :focus="focusKuwei" :placeholder="plsText" border="none"
							placeholderStyle="font-size:30rpx;color:#ADADAD;" color="#ADADAD" v-model="value"
							@change="change" inputAlign="left" @focus="focus" @blur="blur"></u--input>
					</view>

					<view class="sending_btn" @click="send"> 发送 </view>
				</view>

				<view class="mod_img" v-if="fileType == 2 && isZhe">
					<image :src="item.preview_url" v-for="(item, index) in plImage"></image>
				</view>
				<view style="width: 100%; padding: 0 50rpx 0 30rpx; box-sizing: border-box"
					v-if="fileType == 1 && isZhe">
					<com-audio :showDelBtn="true" :src="plImage[0].preview_url"></com-audio>
				</view>

				<view class="mod_icon" v-if="isZhe">
					<view class="check_image" @click.stop="current_icon = 0">
						<image src="@/static/images/icon_tlzxq_jianpan.png" mode=""></image>
					</view>
					<view class="check_image" @click.stop="current_icon = 1">
						<image src="@/static/images/icon_tlzxq_yuyin.png" mode=""></image>
					</view>
					<view class="check_image" @click.stop="uploadFile">
						<image src="@/static/images/icon_tlzxq_tupian.png" mode=""></image>
					</view>
				</view>

				<view class="mod_sound_btn" v-if="current_icon == 1 && isZhe">
					<view class="btn_view" @touchstart.stop="touchstart" @touchend.stop="touchend">
						<text class="btn_view_time" v-show="!isTranscribe">00.000</text>
						<u-count-to v-show="isTranscribe" :autoplay="autoplay" ref="uCountTo" :startVal="0" :endVal="60"
							:decimals="3" :duration="60000" :useEasing="false" fontSize="48rpx"
							color="#fff"></u-count-to>
						<!-- <view class="btn_view_time">{{ time }}</view> -->
						<view class="btn_view_text" v-if="!isTranscribe">{{ start }}</view>
						<view class="btn_view_text" v-if="isTranscribe">{{ end }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<u-popup :show="showLimits" @close="close" @open="open" :closeable="true">
			<view class="pop_view">
				<view class="pop_title"> 权限 </view>
				<view class="pop_prompt">
					<text>*</text>您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益
				</view>
				<view class="pop_price">￥{{ bugPrice }}</view>
				<view class="pop_priceText">当前课程价格</view>
				<view class="pop_btn" v-if="showOne">
					<view class="to_pay" @click="goPay">单独购买</view>
					<view class="to_member" @click="goVip">去开通会员</view>
				</view>
				<view class="pop_btn1" v-else>
					<view class="to_member" @click="goVip">去开通会员</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup mode="center" :show="show1" @close="close1" @open="open1">
			<view class="pop_live">
				<view class="pop_live_title"> 请选择查看需要的行者权限 </view>
				<u-radio-group v-model="live" activeColor="rgb(85, 184, 119)" iconPlacement="right">
					<view class="pop_live_box">
						<view class="pop_live_item" style="display: flex; align-items: center"
							@click="handLive(item.level_id)" v-for="(item, index) in liveList" :key="item.level_id">
							<!-- 元气驿站 -->
							{{ item.level_name }}
							<u-radio :name="item.level_id"></u-radio>
						</view>
						<!-- <view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(2)">
						启初梦谷
						<u-radio :name="2"></u-radio>
					</view>
					<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(3)">
						青空天台
						<u-radio :name="3"></u-radio>
					</view>
					<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(4)">
						无极云顶
						<u-radio :name="4"></u-radio>
					</view>
					<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(5)">
						返朴归源
						<u-radio :name="5"></u-radio>
					</view> -->

						<view class="pop_live_btn">
							<view class="live_btn" @click="liveColse"> 取消 </view>
							<view class="live_btn" style="background: rgb(85, 184, 119); color: #fff"
								@click="liveSubmit">
								确定
							</view>
						</view>
					</view>
				</u-radio-group>
			</view>
		</u-popup>
		
		<u-modal :show="showModal" title="简介" @confirm="showModal = false ;showMaps = true" @close="showMaps = true"
			:closeOnClickOverlay="true">
			<view class="slot-content">
				<rich-text :nodes="detail.content"></rich-text>
			</view>
		</u-modal>
		<floatingBall></floatingBall>
	</view>
</template>

<script >
	import collect from "@/components/collect.vue"; // 收藏、
	import essentials from "./components/essentials.vue"; //奥义
	import inspirationTower from "@/components/search/InspirationTower.vue"; //灵感塔
	import maps from "./maps.nvue"; //灵感塔
	// import reviewContent from "@/components/search/reviewContent.vue"; //评论
	import storage from "@/common/storage.js"; // 缓存封装
	import config from "@/config"; // 配置文件
	import reviewContent from "@/pages/stargate/components/reviewContent.vue"; //评论
	import {
		getCommentList,
		pinglun,
		dianzan,
		getCommentChildren,
		daohangyiInfo,
	} from "@/common/api/daohangyi.js";
	export default {
		components: {
			collect,
			essentials,
			inspirationTower,
			reviewContent,
			maps
		},
		data() {
			return {
				statusBarHeight: 0,
								height: 0,
								currentNum: 0,
								list6: [
									"https://cdn.uviewui.com/uview/swiper/swiper2.png",
									"https://cdn.uviewui.com/uview/swiper/swiper3.png",
									"https://cdn.uviewui.com/uview/swiper/swiper1.png",
								],
								detail: {},
								userInfo: {},
								aoyi: [],
								youji: [],
								id: "",
								showLimits: false, // 弹出层显示关闭
								showOne: false, // 控制购买课程和开通会员按钮显示
								bugPrice: "",
								selectDetail: {}, // 当前选中的数据信息
								focusKuwei: false,
								start: "按住说话",
								end: "松开结束",
								isZhe: false,
								plImage: [],
								fileType: 0, // 1音频  2视频
								isTranscribe: false,
								autoplay: false,
								current_icon: 0,
								value: "",
								plsText: "写回复",
								page: 1,
								list: [],
								toUserId: 0,
								replyId: 0,
								reply: true,
								total: 0,
								comment_count: 0,
								like_count: 0,
								latitude: 0, // 纬度
								longitude: 0, // 经度
								covers: [],
								keyword: "",
								showMaps: true,
								my_level_id: 0,
								show1: false,
								live: 0,
								liveList: [],
								showModal: false,
								renwu: null,
								_mapContext:null,
								detailModal: "您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益您还没有观看该课程的权限，您可以选择单独购买该课程，或选择解锁会员，享更多权益",
			}
		},
		created() {
			const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

			this.statusBarHeight = statusBarHeight.statusBarHeight;
			this.$nextTick(() => {
				uni
					.createSelectorQuery()
					.select(".map1")
					.boundingClientRect((data) => {
						this.height = data.height;
					})
					.exec();
			});
		},
		onLoad(options) {
			this.id = options.id;
			this.getComment();
			
		},
		onShow: function() {
			this.getDetail();
		},
		onReachBottom() {
			if (this.total > this.list.length) {
				this.page += 1;
				this.getComment();
			}
		},
		onReady() {
			this.initMap()
		},
		methods: {
			openHand() {
				this.showMaps = false;
			},
			toGuan(item) {
				// console.log("tttttttttt", item);

				if (this.renwu && this.renwu.id) {
					uni.navigateTo({
						url: "/pages/character/characterDetail?id=" + this.renwu.id,
					});
				}
			},
			open1() {},
			close1() {
				this.show1 = false;
			},
			// 跳地图页面
			goMaps() {
				uni.navigateTo({
					url: `/pages/stargate/maps1`,
				});
			},
			// // 点击标记点触发
			markertap(e) {
				// 过滤对应id的数据
				let obj = {}
				for(let i=0;i<this.detail.info.length;i++){
					 if(this.detail.info[i].id== e.detail.markerId){
					  obj = this.detail.info[i]
					 }
				}
				// console.log(obj)
				this.$refs.essentials.goPlay(obj);
				this.showMaps = false
			},
			// 子组件回调
			showPop(data) {
				this.showMaps = true;
				// console.log(data, 111111);
				this.selectDetail = data;
				// 拉起弹框
				this.showLimits = true;
				this.showMaps = false;
				// 价格赋值
				this.bugPrice = data.price;
				if (data.price > 0) {
					this.showOne = true;
				} else {
					this.showOne = false;
				}
			},
			showMap() {
				// console.log("执行了隐藏");
				this.showMaps = true;
			},
			// // 点击标记点触发
			markertap(e) {
				
			},
			initMap(){
				console.log('走这里了')
				var mapContext = uni.createMapContext("map");//map为map组件id
					
				setTimeout(() => {
					mapContext.getRegion({
						success:(res)=>{
							console.log(res,'附近')
						},
						fail:(err)=>{
							console.log(err,'附近1')
						}
					})
					mapContext.addGroundOverlay({
						id: '1',
						// src: 'https://hx.yitian369.net/dujiang.png',//手绘地图素材路径
						src:'../../static/logo.png',
						bounds: {
							southwest: {//左下角GPS
								longitude:115.87973560338446,
								latitude:28.678889104314777
							},
							northeast: {//右上角GPS
								longitude:115.88248620868217,
								latitude: 28.68415652888838,
							}
						},
						visiable: true,
						zIndex: 1000,
						success: () => {
							console.log("显示成功")
						},
						fail: (e) => {
							console.log("显示失败", e)
						}
					})
				},2000)
				console.log('走这里了2')
				
				
				console.log('走这里3')
			},
			custom() {
				// console.log('搜索')
				this.getDetail();
			},
			getComment() {
				getCommentList({
					id: this.id,
					page: this.page,
				}).then((res) => {
					// console.log("ressssss", res);
					this.my_level_id = res.data.my_level_id;
					this.list.push(...res.data.comment.data);
					this.total = res.data.comment.total;
					this.comment_count = res.data.comment_count;
					this.like_count = res.data.like_count;
				});
			},
			getDetail() {
				console.log(this.$http,55555555)
				daohangyiInfo({
						id: this.id,
						search: this.keyword,
					})
					.then((res) => {
						console.log("infoinfoinfo", res.data.info);
						this.renwu = res.data.renwu;
						this.detail = res.data.info; // 页面详情
						this.userInfo = res.data.userInfo; // 用户信息
						this.aoyi = res.data.aoyi; // 山海意联
						this.youji = res.data.youji; // 游记
						this.toUserId = res.data.userInfo.user_id;
						let covers = [];
						// for(let i=0;i<this.detail.info.length;i++){
						//   console.log(this.detail.info[i])
						// }
						for (let i = 0; i < this.detail.info.length; i++) {
							covers.push({
								id: this.detail.info[i].id,
								latitude: this.detail.info[i].lat,
								longitude: this.detail.info[i].lng,
								iconPath: "../../static/images/icon_shiting.png",
							});
						}
						this.covers = covers;
					})
					.catch((error) => {
						uni.$u.toast(error);
					});
			},
			openPl() {
				this.focusKuwei = true;
			},
			// 跳转订单页
			goPay() {
				// console.log(this.selectDetail, "选中详情");
				uni.navigateTo({
					url: `/pages/detail/wenOrder?from=daohang&id=${this.selectDetail.id}`,
				});
			},
			goVip() {
				uni.navigateTo({
					url: `/pages/member/index`,
				});
			},
			// 弹出层关闭
			close() {
				this.showLimits = false;
				this.showMaps = true;
				// console.log("close");
			},
			// 弹出层打开
			open() {
				this.showLimits = true;
				this.showMaps = false;
				// console.log("open");
			},
			toBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			toDetail(item) {
				// type  1奥义堂  2大成之道
				if (item.type == 1) {
					uni.navigateTo({
						url: `/pages/training/detail?id=${item.id}&type=1`,
					});
				} else {
					uni.navigateTo({
						url: `/pages/training/detail?id=${item.id}&type=2`,
					});
				}
			},
			handReply(val, index) {
				// console.log("vallll", val);
				this.plsText = "回复@ " + val.user.nick_name;
				this.replyId = val.id;
				this.toUserId = val.user.user_id;
				this.focusKuwei = true;
				this.showMode = true;
				this.is_c = true;
				this.currentIndex = index;
			},
			handReply1(val, item, index) {
				// console.log("vallll111", val);
				this.plsText = "回复@ " + val.user.nick_name;
				this.replyId = item.id;
				this.toUserId = val.user.user_id;
				this.focusKuwei = true;
				this.showMode = true;
				this.is_c = true;
				this.currentIndex = index;
			},
			focus() {
				this.isZhe = true;
			},
			blur() {
				setTimeout(() => {
					this.focusKuwei = false;
				}, 0);
				this.plsText = "写回复";
			},
			openPl() {
				this.focusKuwei = true;
			},
			send() {
				this.$http.userLevelList({}).then((res) => {
					if (
						res.data.userInfo.is_teacher == 1 ||
						res.data.userInfo.is_senators == 1
					) {
						this.show1 = true;
						// console.log("reessssssliiive", res);
						this.liveList = res.data.list;
						this.liveList.unshift({
							level_name:'公开',
							level_id:0
						})
					} else {
						this.huifu();
					}
				});
			},
			huifu(grade_auth = 0) {
				let file_id = 0;
				if (this.plImage.length) {
					file_id = this.plImage[0].file_id;
				}
				pinglun({
					id: this.id,
					file_id,
					content: this.value,
					comment_id: this.replyId,
					comment_user_id: this.toUserId,
					grade_auth,
					// user_id: this.data.user_id,
				}).then((res) => {
					// console.log("ressss", res);
					this.replyId = 0;
					// this.toUserId = this.data.user_id;
					this.value = "";
					this.isZhe = false;
					this.fileType = 0;
					this.current_icon = 0;
					this.plImage = [];
					if (this.is_c) {
						this.$refs.review[this.currentIndex].expand();
						this.is_c = false;
					}
					this.list = [];
					this.page = 1;
					this.getComment();
				});
			},
			refresh() {
				this.getComment();
			},
			async touchend() {
				// console.log("33333");
				this.isTranscribe = false;
				let that = this;
				let token = storage.get("token");
				const url = await getRecorderManager.stopManager();
				// console.log("222222222", url);
				uni.uploadFile({
					url: config.uni_app_web_api_url + "/api/upload/audio", // 仅为示例，非真实的接口地址
					filePath: url,
					name: "file",
					formData: {
						user: "test",
					},
					header: {
						"Access-Token": token,
					},
					success: (res) => {
						const data = JSON.parse(res.data);

						// console.log("resssssssss", data);
						that.plImage = [{
							file_id: data.data.fileInfo.file_id,
							preview_url: data.data.fileInfo.external_url,
						}, ];
						that.fileType = 1;
					},
				});
			},
			uploadFile() {
				let token = storage.get("token");
				let that = this;
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: function(res) {
						// console.log(JSON.stringify(res.tempFilePaths));

						uni.uploadFile({
							url: config.uni_app_web_api_url + "/api/upload/image", // 仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: "file",
							formData: {
								user: "test",
							},
							header: {
								"Access-Token": token,
							},
							success: (res) => {
								const data = JSON.parse(res.data);
								// console.log("resssss", res, data.data.fileInfo);
								that.plImage = [{
									file_id: data.data.fileInfo.file_id,
									preview_url: data.data.fileInfo.preview_url,
								}, ];
								that.fileType = 2;
							},
						});
					},
				});
			},
			change() {},
			zheColse() {
				this.isZhe = false;
				this.fileType = 0;
				this.plImage = [];
				this.current_icon = 0;
			},
			handLive(live) {
				this.live = live;
			},
			liveColse() {
				this.show1 = false;
			},
			liveSubmit() {
				this.huifu(this.live);
				this.show1 = false;
			},
		}
	}
</script>

<style scoped lang="scss">
.map_view{
	flex:1;
	
}
.map{
	// flex:1;
	width: 750rpx;
	height:750rpx;
	// z-index: 1000;
}
.map1 {
	// width: 100%;
	// flex: 1;
	width: 750rpx;
	height: 750rpx;
	background: red;
	// background: white;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;

	.head_back {
		position: absolute;
		padding: 0 30rpx;
		// margin-top: 55rpx;
		width: 750rpx;
		top: 55rpx;
		box-sizing: border-box;

		.img {
			width: 22rpx;
			height: 36rpx;
		}
	}

	// .map {
	// 	// flex: 1;
	// 	flex:1;
	// 	height:750rpx;

	// 	.callout {
	// 		width: 200rpx;
	// 		height: auto;
	// 		border-radius: 6px;
	// 		padding: 5px;
	// 		background-color: #fff;
	// 	}
	// }
}
/deep/.box_search {
	width: 750rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	// z-index: 1000;
	.u-search {
		background: #f7f8fa;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
	}

	.u-search__content {
		background-color: none;
	}
}
.box {
	width: 750rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
}
.head {
	// width: 750rpx;
	background: #f7f8fa;
	border-radius: 16rpx;
	padding: 32rpx 32rpx 48rpx;
	box-sizing: border-box;
	margin-top: 32rpx;

	.head_title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.title_left {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #444444;
		}
	}

	.head_content {
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #888888;
		margin-top: 16rpx;
	}
}
.rotate {
	// width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-top: 32rpx;
}
.essentials {
		// width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 49rpx;
		margin-bottom: 49rpx;

		.essentials_title {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #444444;
		}

		.essentials_box {
			// width: 100%;
			// padding: 0 30rpx;
			box-sizing: border-box;

			.essentials_box_item {
				// width: 100%;
				padding: 32rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				background: #f7f8fa;
				margin-top: 32rpx;

				.item_left {
					flex: 1;

					.left_title {
						font-size: 30rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						// color: #eeeeee;
					}

					.left_time {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #adadad;
						margin-top: 32rpx;
					}
				}

				.item_right {
					width: 68rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}
			}
		}
	}
	.detailed {
			// width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			background: rgb(247, 248, 250);
			margin-top: 40rpx;
	
			.detailed_top {
				// width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
	
				.detailed_top_left {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #474747;
				}
			}
	
			.detailed_bottom {
				font-size: 26rpx;
				color: #adadad;
				margin-top: 16rpx;
			}
		}
		
.comment {
	// width: 100%;
	background: #f7f8fa;

	.comment_head {
		// width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 1rpx solid #eee;

		.comment_head_left {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #444444;
		}

		.comment_head_right {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #444444;
		}
	}

	.comment_box {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
}
.btn_box {
	// width: 100%;
	width: 750rpx;
	height: 112rpx;
	background: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 30rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #888888;
	position: fixed;
	bottom: 0;
	left: 0;
	border-top: 1rpx solid #f7f8fa;
	z-index: 99;

	image {
		width: 48rpx;
		height: 48rpx;
		margin-right: 8rpx;
	}
}
.zhezhao {
	width: 750rpx;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1086;
}

.operate1 {
	// width: 100%;
	width: 750rpx;
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
	padding: 16rpx 30rpx 16rpx 20rpx;
	box-sizing: border-box;
	z-index: 10087;

	.operate_top {
		// width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.mod_img {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 16rpx 30rpx;

		image {
			width: 222rpx;
			height: 222rpx;
			margin-bottom: 12rpx;
			margin-right: 12rpx;
		}

		image:nth-child(3n) {
			margin-right: 0;
		}
	}

	.mod_icon {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #e5e5e5;
		margin-bottom: 38rpx;

		.check_image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 28rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.mod_icon_item {
			margin-right: 32rpx;
		}
	}

	.mod_sound_btn {
		padding: 106rpx 227rpx;

		.btn_view {
			width: 296rpx;
			height: 296rpx;
			background-image: url("@/static/images/pic_cjwc_luzhi.png");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			display: flex;
			flex-direction: row;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			.btn_view_time {
				color: #ffffff;
				font-size: 46rpx;
			}

			.btn_view_text {
				color: #ffffff;
				font-size: 26rpx;
				margin-top: 4rpx;
			}
		}
	}

	.inp {
		height: 80rpx;
		background: #f4f4f4;
		border-radius: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 32rpx;
	}

	.sending_btn {
		width: 172rpx;
		height: 80rpx;
		background: #55b877;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-left: 16rpx;
	}
}

/deep/ .pop_view {
	padding: 0 30rpx;

	.pop_title {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 40rpx 0;
		font-size: 32rpx;
	}

	.pop_prompt {
		padding: 32rpx 30rpx;
		background: #f7f8fa;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #888888;

		text {
			color: #ee6060;
		}
	}

	.pop_price {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 40rpx 0 8rpx 0;
		font-size: 48rpx;
		font-weight: 400;
		color: #444444;
	}

	.pop_priceText {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-bottom: 180rpx;
		font-size: 26rpx;
		color: #888888;
	}

	.pop_btn {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;

		.to_pay {
			width: 335rpx;
			height: 80rpx;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			border: 1rpx solid #55b877;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			color: #55b877;
		}

		.to_member {
			width: 335rpx;
			height: 80rpx;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			background: #55b877;
		}
	}

	.pop_btn1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;

		.to_member {
			// width: 335rpx;
			// width: 100%;
			height: 80rpx;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			background: #55b877;
		}
	}
}

.pop_live {
	width: 570rpx;
	// height: 820rpx;
	display: flex;
	flex-direction: column;
	
	justify-content: center;
	background: #fff;

	.pop_live_title {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #666666;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.pop_live_box {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		box-sizing: border-box;

		.pop_live_item {
			// width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 1rpx solid #ccc;
			padding: 30rpx 0;
			box-sizing: border-box;
		}
	}

	.pop_live_btn {
		// width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 28rpx;
		margin-bottom: 28rpx;
		.live_btn {
			width: 46%;
			height: 80rpx;
			border-radius: 24rpx;
			border: 1rpx solid #ccc;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	}
}

.slot-content {
	max-height: 500rpx;
	overflow: auto;
}
/deep/ .u-modal__content{
	flex-direction: column;
}
</style>
